<template>
  <section>
    <div style="background-color: #e9fcfa;padding:5px  8px;">
      <div style="font-size: 1em"> <el-input v-model="articleDto.basicTitle" placeholder="请输入标题，不输入不显示" clearable style=" width: 300px;"></el-input>   <el-button size="small" type="primary" @click="getArticleList"> 查询</el-button></div>
    </div>

    <page-table :page-data="articleList"  :loading="loading" :do-get-page-data="getArticleList" :select-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
      ></el-table-column>
       <el-table-column
      prop="basicTitle"
      label="文章标题"
      align="left"
      show-overflow-tooltip
    >
    </el-table-column>
      <el-table-column
      prop="categoryTitleName"
      label="栏目"
      align="left"
      show-overflow-tooltip
    >
    </el-table-column>
      <el-table-column
        prop="articleStatusValue"
        label="审核状态"
        align="center"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span :class="statusStyle(scope.row)">{{scope.row.articleStatusValue|keyText('WZZT')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="basicDateTime"
        label="发布时间"
        width="150"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
    </page-table>
    <div class="footer">
      <el-button
        size="mini"
        type="primary"
        @click="save"
      >确定
      </el-button>
      <el-button
        size="mini"
        type="info"
        @click="close(false)"
      >取消
      </el-button>
    </div>
  </section>
</template>

<script>;
import {mapGetters} from "vuex";

export default {

  name: "relevantList",
  props: {
    articleId: String
  },
  data() {
    return {
      loading: false,
      multiList: 0,
      articleDto: {
        articleType: "",//属性
        basicTitle: "",//文章标题
        keyword: "",//文章标题
        status: 'audit',// 审核通过
        pageNumber: 1,
        pageSize: 10
      },
      articleList:{}
    }
  },
  mounted() {
    this.getArticleList()
  },
  computed: {
    ...mapGetters({

    })
  },
  methods: {
    //获取多选文章id
    handleSelectionChange(val) {
      this.multiList = val
    },
    save() {
      if (null === this.multiList || this.multiList.length <= 0){
        this.warning("请至少选择一篇文章")
        return
      }
      let ids = []
      this.multiList.map(item=>{
        ids.push(item.articleID)
      })
      let par = {
        relevantids: ids.join(','),
        articleid: this.articleId
      }
      this.API.saveArticleRelevantUsingPOST({saveArticleRelevantDto: par}).then(res => {
        this.success("操作成功")
        this.close(true)
      })
    },

    close(tag) {
      this.$emit("close",tag)
    },
    //文章列表
    getArticleList(search) {
      this.loading = true;
      let data = Object.assign(this.articleDto, search)
      this.API.listArticleUsingPOST({article:data}).then(res=>{
        this.articleList = res.data
        this.loading = false;
      })
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = ""
      switch (row.articleStatusValue) {
        case "NEW_A":
          cls = 'status_new'
          break
        case "AUDIT_A":
          cls = 'status_audit'
          break
        case "REFUSE_A":
          cls = 'status_reject'
          break
        case "AUDIT_B":
          cls = 'status_warn'
          break
      }
      return cls
    }
  }
}
</script>

<style scoped>
  .footer {
    text-align: right;
    box-sizing: border-box;
  }
</style>
